import moment from 'moment';
import React, { useState, useEffect, useRef } from 'react';
interface IProp {
  /** 开始时间 YYYY-MM-DD hh:mm:ss */
  beginTime: string;
}

/**通话话时长-计时器 */
const CallTime: React.FC<IProp> = ({ beginTime }) => {
  /** 存储计时器 */
  const timer = useRef<any>(null);
  /** 显示时间 */
  const [count, setCount] = useState<string>('');
  /** 开始时间 */
  const start: any = moment(beginTime);

  useEffect(() => {
    timer.current = setInterval(() => {
      /** 当前时间 */
      const end: any = moment();
      /** 计算【时间差】=【当前时间】-【开始时间】*/
      const diff = moment.utc(end - start).format('HH:mm:ss');
      setCount(diff);
    }, 1000);

    // 卸载-清除
    return () => {
      clearInterval(timer.current);
    };
  }, [beginTime, start]);

  return <div className="call-time">{count}</div>;
};
export default CallTime;
